<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新华交友纸条</title>
</head>
<body>
<div class="user">
    <header class="user__header">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
        <h1 class="user__title">新华交友纸条</h1>
    </header>

    <form class="form" th:action="@{/love/addUserFriend}" method="post"   enctype="multipart/form-data">

        <div class="form__group">
            <input   type="text" name="userName" placeholder="昵称" maxlength="20" required class="form__input" />
        </div>
        <div class="form__group" >
            <select   class="form__input"  name="sex" >
                <option value="0">女</option>
                <option value="1">男</option>

            </select>
        </div>

        <div class="form__group">
            <input type="text" name="grade" placeholder="年级:大一/二/三/四" maxlength="10" required class="form__input" />
        </div>

        <div class="form__group">
            <input type="text"  name="major"  placeholder="专业：例如：软件工程" maxlength="10" required class="form__input" />
        </div>
        <div class="form__group">
            <input type="text"  name="hometown" maxlength="20" placeholder="家乡:例如：广东汕头" required class="form__input" />
        </div>
        <div class="form__group">
            <input type="text"  name="vx"  placeholder="微信联系方式" maxlength="30" require class="form__input" />
        </div>
        <textarea  class="form__input" rows="5" cols="30" name="introduce"   placeholder="交友宣言:随便说两句吧" required    maxlength="200"></textarea>
        <input  class="btn" type="submit" value="提交"/>


    </form>
</div>

</body>
<style>
    .bt2 {
        outline: none;
        /*去掉输入框点击后的边框聚焦效果*/
        width: 40px;
        border-bottom: 1px solid #dbdbdb;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        /*让输入框有下划线效果*/
    }

    .bt2 {
        font-size: 10px;
        width: 60px;
        height: 40px;
        background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
        /*“登录”按钮背景色*/
        color: #fff;
        /*“登录”两字颜色*/
        border-radius: 10px;
        /*边框圆角*/
    }
</style>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Roboto";
        font-size: 14px;
        background-size: 200% 100% !important;
        -webkit-animation: move 10s ease infinite;
        animation: move 10s ease infinite;
        transform: translate3d(0, 0, 0);
        background: linear-gradient(45deg, #49D49D 10%, #A2C7E5 90%);
        height: 100vh;
    }

    .user {
        width: 90%;
        max-width: 340px;
        margin: 10vh auto;
    }

    .user__header {
        text-align: center;
        opacity: 0;
        transform: translate3d(0, 500px, 0);
        -webkit-animation: arrive 500ms ease-in-out 0.7s forwards;
        animation: arrive 500ms ease-in-out 0.7s forwards;
    }

    .user__title {
        font-size: 14px;
        margin-bottom: -10px;
        font-weight: 500;
        color: white;
    }

    .form {
        margin-top: 40px;
        border-radius: 6px;
        overflow: hidden;
        opacity: 0;
        transform: translate3d(0, 500px, 0);
        -webkit-animation: arrive 500ms ease-in-out 0.9s forwards;
        animation: arrive 500ms ease-in-out 0.9s forwards;
    }

    .form--no {
        -webkit-animation: NO 1s ease-in-out;
        animation: NO 1s ease-in-out;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .form__input {
        display: block;
        width: 100%;
        padding: 20px;
        font-family: "Roboto";
        -webkit-appearance: none;
        border: 0;
        outline: 0;
        transition: 0.3s;
    }
    .form__input:focus {
        background: #f7f7f7;
    }

    .btn {
        display: block;
        width: 100%;
        padding: 20px;
        font-family: "Roboto";
        -webkit-appearance: none;
        outline: 0;
        border: 0;
        color: white;
        background: #ABA194;
        transition: 0.3s;
    }
    .btn:hover {
        background: #a09486;
    }

    @-webkit-keyframes NO {
        from, to {
            transform: translate3d(0, 0, 0);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translate3d(-10px, 0, 0);
        }
        20%, 40%, 60%, 80% {
            transform: translate3d(10px, 0, 0);
        }
    }

    @keyframes NO {
        from, to {
            transform: translate3d(0, 0, 0);
        }
        10%, 30%, 50%, 70%, 90% {
            transform: translate3d(-10px, 0, 0);
        }
        20%, 40%, 60%, 80% {
            transform: translate3d(10px, 0, 0);
        }
    }
    @-webkit-keyframes arrive {
        0% {
            opacity: 0;
            transform: translate3d(0, 50px, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    @keyframes arrive {
        0% {
            opacity: 0;
            transform: translate3d(0, 50px, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    @-webkit-keyframes move {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 100% 0;
        }
        100% {
            background-position: 0 0;
        }
    }
    @keyframes move {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 100% 0;
        }
        100% {
            background-position: 0 0;
        }
    }
</style>
</html>